<template>
  <div class="main-wrapper">
    <!-- 动态组件 -->
    <div class='content-wrapper'>
      <component :is="currentComponent"></component>
    </div>
    <cube-tab-bar v-model="selectedLabel" show-slider @change="changeTab">
      <cube-tab v-for="(item) in tabs" :icon="item.icon" :label="item.label" :value="item.value" :key="item.value"></cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script type="text/ecmascript-6">
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Main',
  components: {
    // 异步组件引入
    // eslint-disable-next-line quote-props
    'home': () => import('@com/home/Home'),
    // eslint-disable-next-line quote-props
    'cart': () => import('@com/cart/Cart'),
    // eslint-disable-next-line quote-props
    'me': () => import('@com/me/Me')
  },
  data: function () {
    return {
      selectedLabel: 'home',
      tabs: [
        {
          label: '首页',
          // 使用iconfont字体
          icon: 'iconfont icon-home',
          value: 'home'
        },
        {
          label: '购物车',
          icon: 'iconfont icon-cc-cart',
          value: 'cart'
        },
        {
          label: '我',
          icon: 'iconfont icon-me',
          value: 'me'
        }
      ],
      currentComponent: 'home'
    }
  },
  methods: {
    changeTab (label) {
      console.log(label)
      this.currentComponent = label
    }
  }
}
</script>

<style lang="stylus" scoped>
// 引用px2rem函数
// stylus使用别名需要加前缀~
@import '~@css/style.styl';

// >>>:穿透样式，修改第三方组件样式
>>> .iconfont {
  font-size: px2rem(50);
}
.main-wrapper
  min-height:100vh
  display:flex
  flex-direction:column
  .content-wrapper
    flex:1 0
    position:relative
  .cube-tab-bar
    flex:0 0 px2rem(30)
    font-size: px2rem(30)
</style>
